<template>
    <div>
        <common-header :user="userinfo"></common-header>
        <main>
            <div class="detail_header">
                <div class="con_box">
                    <div class="top">
                        <div class="detail_title" style="border-color:#345BE9">
                            <img src="/static/images/fabu1.png" alt="">
                            <div class="title" style="color:#345BE9">我要发布</div>
                        </div>
                    </div>
                    <div class="position">
                        <img src="/static/images/addr1.png" alt="">
                        <span>您现在的位置：</span>
                        <a href="#/">首页></a>
                        <a href="#/space">创客集市></a>
                        <span class="now">我要发布</span>
                    </div>
                </div>
            </div>
            <div class="con_box">
                <div class="fabu_con">
                    <div class="fb_item">
                        <div class="fb_title">
                            项目封面：
                        </div>
                        <div class="fb_img">
                            <el-upload
                            class="upload-demo"
                            list-type="picture-card"
                            action="http://jdxy.ituohong.cn/admin/upload"
                            :on-success="handelSuccess"
                            >
                            <i class="el-icon-plus"></i>
                           
                            </el-upload>
                        </div>
                    </div>
                    <div class="fb_item">
                        <div class="fb_title">
                            项目名称：
                        </div>
                        <div class="fb_input">
                            <input type="text" placeholder="请输入项目标题名" v-model="title">
                        </div>
                    </div>
                    <div class="fb_item">
                        <div class="fb_title">
                            项目金额：
                        </div>
                        <div class="fb_input">
                            <input type="text" placeholder="请输入项目标金额" v-model="price">
                        </div>
                    </div>
                    <div class="fb_item">
                        <div class="fb_title">
                            正文描述：
                        </div>
                        <div class="fb_box">
                            <el-upload class="avatar-uploader" action="http://jdxy.ituohong.cn/admin/upload" name="file" :show-file-list="false" :on-success="uploadSuccess" :before-upload="beforeUpload">
                            </el-upload>
                            <!-- <quill-editor
                            @change="getcon($event)"
                            ></quill-editor> -->
                            <quill-editor v-model="content" :content="content" :options="editorOption" @blur="onEditorBlur($event)" @focus="onEditorFocus($event)" @ready="onEditorReady($event)" ref="QuillEditor">
                            </quill-editor>
                        </div>
                    </div>
                    <div class="submit_btn" @click="submit">
                        确认发布
                    </div>
                </div>
            </div>
        </main>
        <common-footer></common-footer>
    </div>
</template>
<script>
import CommonHeader from '@/components/commonheader2'
import CommonFooter from '@/components/commonfooter'
import CommonBanner from '@/components/commonBanner'
import commonNav from '@/components/commonNav'
import { quillEditor } from 'vue-quill-editor'
  
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 加粗，斜体，下划线，删除线
  ['blockquote', 'code-block'],                      //引用，代码块
  [{ 'header': 1 }, { 'header': 2 }],               // 几级标题
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],     // 有序列表，无序列表
  [{ 'script': 'sub' }, { 'script': 'super' }],      // 下角标，上角标
  [{ 'indent': '-1' }, { 'indent': '+1' }],          // 缩进
  [{ 'direction': 'rtl' }],                         // 文字输入方向
  [{ 'size': ['small', false, 'large', 'huge'] }],  // 字体大小
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],// 标题
  [{ 'color': [] }, { 'background': [] }],          // 颜色选择
  [{ 'font': ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial'] }],// 字体
  [{ 'align': [] }], // 居中
  ['clean'],                                       // 清除样式,
  ['link', 'image'],  // 上传图片、上传视频
]
export default {
    data(){
        return{
            detail:null,
            img:'',
            title:'',
            price:'',
            con:'',
            list:[],
            prev:null,
            next:null,
            detailid:'',
            userinfo:null,


            name: 'register-modules-example',
            content: '',
            editorOption: {
                placeholder: '请在这里输入',
                theme: 'snow', //主题 snow/bubble
                modules: {
                history: {
                    delay: 1000,
                    maxStack: 50,
                    userOnly: false
                },
                toolbar: {
                    container: toolbarOptions,
                    handlers: {
                    image: function (value) {
                        if (value) {
                        // 调用element的图片上传组件
                        document.querySelector('.avatar-uploader input').click()
                        } else {
                        this.quill.format('image', false)
                        }
                    }
                    }
                }
                }
            },

        }
    },
    created(){
        this.getuserInfo()
        
    },
    mounted(){
    },
    watch:{
        $route:{
            handler(newval,oldval){
                if(newval){
                    this.detailid = newval.query.id
                    this.getdata(newval.query.id)
                    this.getlist()
                }
            },
            deep:true
        }
    },
    methods:{
        submit(){
            if(!this.price||!this.title||!this.img||!this.content){
                alert('请完善所有信息后提交')
            }else{
                let params={
                    "price":this.price,
                    "title":this.title,
                    "content":this.content,
                    "image":this.img
                }
                this.$api.post('addProject',params).then(res=>{
                    if(res.code === 200){
                        alert(res.data.msg)
                        this.$router.go(-1)
                    }else{
                        alert(res.message)
                        this.$router.go(-1)
                    }
                })
            }
            
        },
        getcon(e){
            console.log(e)
            this.con = e.html
        },
        change(e){
            var form = new FormData()
            form.append('file',this.$refs.upload.files[0])
            this.$api.post('upload',{form}).then(res=>{
                console.log(res)

            })
        },
        getuserInfo(){
            this.$api.get('getUserInfo',{
                headers:{
                    Authorization:localStorage.getItem('token')
                }
            }).then(res=>{
                if(res.code === 200){
                    localStorage.setItem('userInfo',JSON.stringify(res.data.data))
                    this.userinfo = res.data.data
                }else{
                    alert(res.message)
                    localStorage.removeItem('token')
                    localStorage.removeItem('userInfo')
                    this.$router.push({path:'/login'})
                }
            })
        },
        // 文件上传成功时
        handelSuccess(res, file, fileList) {
        console.log("上传成功", res, file, fileList);
        this.img = res.data.url
        console.log(this.img)
        },
        // 文件上传时
        handelProgress(event, file, fileList) {
        console.log("上传时", event, file, fileList);
        },

         // 失去焦点
    onEditorBlur (editor) { },
    // 获得焦点
    onEditorFocus (editor) { },
    // 开始
    onEditorReady (editor) { },
    // 值发生变化
    onEditorChange (editor) {
      this.content = editor.html;
      console.log(editor);
    },
    beforeUpload (file) {console.log(file) },
    uploadSuccess (res, file, fileList) {
      // 获取富文本组件实例
      console.log(res)
      let quill = this.$refs.QuillEditor.quill
      // 如果上传成功
      if (res) {
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res为服务器返回的图片链接地址
        quill.insertEmbed(length, 'image', res.data.url)
        // 调整光标到最后
        quill.setSelection(length + 1)
      } else {
        // 提示信息，需引入Message
        this.$message.error('图片插入失败！')
      }
    }
    },
    components:{
        CommonBanner,
        CommonFooter,
        CommonHeader,
        commonNav,
        quillEditor
    }
}
</script>
<style lang="scss" scoped>
 @import  '@/assets/css/common.scss';
.con_box{
    width: 1200px;
    margin: 0 auto;
    padding-bottom: 50px;
}
</style>